<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'basicdata.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item><a routerLink="/pages/basicdata/employs">{{ 'basicdata.breadcrumb.employs' | translate
          }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'basicdata.breadcrumb.addEmploys' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="card">
      <div class="card-title">
        <span>新增员工</span>
      </div>
      <form dForm [layout]="layoutDirection" [labelSize]="'sm'" [labelAlign]="'end'" class="mt-5"
        (dSubmit)="submit($event)">
        <div class="grid">
          <div class="u-1-2">
            <d-form-item>
              <d-form-label><span class="Required">*</span>职员编码</d-form-label>
              <d-form-control>
                <input dTextInput type="text" [(ngModel)]="PostEmploy.employeeCode" name="employeeCode"
                  [dValidateRules]="PostEmployRules.employeeCodeRules">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label><span class="Required">*</span>职员姓名</d-form-label>
              <d-form-control>
                <input dTextInput type="text" [(ngModel)]="PostEmploy.name" name="name"
                  [dValidateRules]="PostEmployRules.nameRules">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label><span class="Required">*</span>员工角色</d-form-label>
              <d-form-control>
                <d-select [options]="roleOptions" [multiple]="true" [(ngModel)]="PostEmploy.userRoles" name="UserRoles"
                  [extraConfig]="{ labelization: { enable: true, overflow: 'multiple-line' } }"
                  [dValidateRules]="PostEmployRules.UserRolesRules"></d-select>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label><span class="Required">*</span>工号</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="jobNumber" [(ngModel)]="PostEmploy.jobNumber"
                  [dValidateRules]="PostEmployRules.jobNumberRules">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label><span class="Required">*</span>账号</d-form-label>
              <d-form-control>
                <input dTextInput type="text" [(ngModel)]="PostEmploy.accountNumber" name="accountNumber"
                  [dValidateRules]="PostEmployRules.accountNumberRules">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label><span class="Required">*</span>密码</d-form-label>
              <d-form-control>
                <input dTextInput type="text" [(ngModel)]="PostEmploy.password" name="password"
                  [dValidateRules]="PostEmployRules.passwordules">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label><span class="Required">*</span>上级部门</d-form-label>
              <d-form-control>
                <div [ngClass]="{'cascader':this.dispaly&&!this.departmentId.length}">
                  <d-cascader [options]="departmentOptions" [dropdownPanelClass]="'custom-class'"
                    [canSelectParent]="true" [showPath]="true" [(ngModel)]="departmentId" name="departmentId"
                    placeholder="请选择部门" (ngModelChange)="cascaderonChanges($event)"
                    [dValidateRules]="PostEmployRules.departmentIdRules"></d-cascader>
                </div>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>部门领导</d-form-label>
              <d-form-control>
                <d-radio-group [name]="'isleader-group'" [values]="isManagerType" [direction]="'row'"
                  [(ngModel)]="isManager">
                </d-radio-group>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>员工岗位</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="position" [(ngModel)]="PostEmploy.position">
              </d-form-control>
            </d-form-item>
          </div>

          <div class="u-1-2">
            <d-form-item>
              <d-form-label>车间</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="workshop" [(ngModel)]="PostEmploy.workshop"
                  (click)=" selectWorkShop()">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>入职时间</d-form-label>
              <d-form-control>
                <d-datepicker-pro [(ngModel)]="EntryDate" [format]="'y-MM-dd'" name="EntryDate"
                  (ngModelChange)="dropdownToggle($event)"></d-datepicker-pro>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>性别</d-form-label>
              <d-form-control>
                <d-radio-group [name]="'gender-group'" [values]="genderType" [direction]="'row'" [(ngModel)]="gender">
                </d-radio-group>
              </d-form-control>
            </d-form-item>
          </div>

          <div class="u-1-2">
            <d-form-item>
              <d-form-label>手机号</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="ownerPhoneNumber" [(ngModel)]="PostEmploy.ownerPhoneNumber"
                  [dValidateRules]="PostEmployRules.telephoneRules">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>电子邮箱</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="ownerEmail" [(ngModel)]="PostEmploy.ownerEmail"
                  [dValidateRules]="PostEmployRules.emailRules">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>身份证号</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="identityCardNumber" [(ngModel)]="PostEmploy.identityCardNumber" [dValidateRules]="PostEmployRules.cardNumberRules">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>银行账号</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="bankAccountNumber" [(ngModel)]="PostEmploy.bankAccountNumber">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>银行名称</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="bankName" [(ngModel)]="PostEmploy.bankName">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>开户人</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="accountHolder" [(ngModel)]="PostEmploy.accountHolder">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>合同开始日期</d-form-label>
              <d-form-control>
                <d-datepicker-pro [(ngModel)]="PostEmploy.contractStartDate" [format]="'y-MM-dd'"
                  name="contractStartDate"></d-datepicker-pro>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>合同结束日期</d-form-label>
              <d-form-control>
                <d-datepicker-pro [(ngModel)]="PostEmploy.contractEndDate" [format]="'y-MM-dd'"
                  name="contractEndDate"></d-datepicker-pro>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>家庭住址</d-form-label>
              <d-form-control>
                <input dTextInput type="text" [(ngModel)]="PostEmploy.address" name="address">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>工资类别</d-form-label>
              <d-form-control>
                <input dTextInput type="text" name="salaryCategory" [(ngModel)]="PostEmploy.salaryCategory">
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>参保情况</d-form-label>
              <d-form-control>
                <d-radio-group [name]="'isInsured'" [values]="isInsuredType" [direction]="'row'"
                  [(ngModel)]="isInsured"></d-radio-group>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>员工类型</d-form-label>
              <d-form-control>
                <d-radio-group [name]="'employTypes-group'" [values]="employTypes" [direction]="'row'"
                  [(ngModel)]="employeeType"></d-radio-group>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>是否内宿</d-form-label>
              <d-form-control>
                <d-radio-group [name]="'isDormitory-group'" [values]="isDormitoryType" [direction]="'row'"
                  [(ngModel)]="isDormitory"></d-radio-group>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>离职日期</d-form-label>
              <d-form-control>
                <d-datepicker-pro [(ngModel)]="this.PostEmploy.resignationDate" [format]="'y-MM-dd'" [appendToBody]="true"
                  name="resignationDate"></d-datepicker-pro>
              </d-form-control>
            </d-form-item>
          </div>
          <div class="u-1-2">
            <d-form-item>
              <d-form-label>头像</d-form-label>
              <d-form-control>
                <ng-container *ngIf="fileUploaders.length > 0">
                  <div class="devui-add-images">
                    <div class="devui-add-items {{ fileUploaders[fileUploaders.length-1].status === 3 ? 'devui-upload-failed' : '' }}
                            {{ fileUploaders[fileUploaders.length-1].status === 2 ? 'devui-upload-success' : '' }}">
                      <span class="filename">{{ fileUploaders[fileUploaders.length-1].file.name }}</span>
                      <div *ngIf="fileUploaders[fileUploaders.length-1].status === 1" class="devui-loading">
                        <d-progress [percentage]="fileUploaders[fileUploaders.length-1].percentage" [height]="'5px'"
                          [strokeColor]="'#50D4AB'"></d-progress>
                        <span (click)="deleteFile(fileUploaders[fileUploaders.length-1])" class="devui-cancel-upload">{{
                          CANCELUPLOAD }}</span>
                      </div>
                      <img
                        *ngIf="fileUploaders[fileUploaders.length-1].status === 2 || fileUploaders[fileUploaders.length-1].status === 3"
                        alt="" [src]=this.headerURL>
                    </div>
                    <span
                      class="icon icon-delete {{ fileUploaders[fileUploaders.length-1].status === 3 ? 'devui-failed-icon' : '' }}"
                      (click)="deleteFile(fileUploaders[fileUploaders.length-1])"></span>
                    <span *ngIf="fileUploaders[fileUploaders.length-1].status === 3" class="icon icon-running"
                      (click)="dUpload.uploadFiles()"></span>
                  </div>
                </ng-container>
                <div dUpload #dUpload="dUpload" [enableDrop]="true"
                  class="devui-add-images devui-upload {{ isDropOver ? 'devui-upload-dropover' : '' }}"
                  [fileOptions]="fileOptions" [uploadOptions]="uploadOptions" [uploadedFiles]="uploadedFiles"
                  [fileUploaders]="fileUploaders" (fileDrop)="fileDrop($event)" (fileOver)="fileOver($event)"
                  (fileSelect)="fileSelect($event)" (successEvent)="onSuccess($event)" (errorEvent)="onError($event)">
                  <span class="icon-op-add"></span>
                </div>
              </d-form-control>
            </d-form-item>
          </div>
        </div>
        <d-form-operation>
          <d-button bsStyle="primary" dFormSubmit>确定</d-button>
          <d-button class="ms-3" bsStyle="common" (btnClick)=" cancel()">取消</d-button>
        </d-form-operation>
      </form>
    </div>

  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
